<template>
  <div class="home">
    <!-- 新建区域 -->
    <div class="NewArea">
      <!-- 页面头部和查询区域 -->
      <div class="NewArea-tittle">
        <div class="crumbs">
          <p>
            <span>设备管理 /</span> <span>公共设备管理 /</span> <span> 新建公共设备</span>
          </p>
          <h3>新建设备</h3>
        </div>
      </div>
      <div class="NewArea-content">
        <div class="content-title">
          <span>基础信息</span>
        </div>
        <!-- 新建 -->
        <div class="add">
          <el-form require-asterisk-position="right">
            <!-- <el-form-item  label="设备分类" required="true">
          <el-input  clearable v-model="addData.regionName" placeholder="请输入" /> -->
            <!-- </el-form-item> -->
            <el-form-item label="设备分类" required="true">
              <el-select clearable v-model="addData.equipmentClassify" placeholder="设备分类" style="width:350px">
                <el-option label="电梯" value="电梯" />
                <el-option label="健身器材" value="健身器材" />
                <el-option label="路灯" value="路灯" />
                <el-option label="垃圾桶" value="垃圾桶" />
                <el-option label="灭火器" value="灭火器" />
              </el-select>
            </el-form-item>

            <el-form-item label="设备名称" required="true">
              <el-input clearable v-model="addData.equipmentName" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="设备编号">
              <el-input clearable v-model="addData.equipmentNumber" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="设备型号">
              <el-input clearable v-model="addData.brandModel" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="位置区域">
              <el-input clearable v-model="addData.area" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="维护人员">
              <el-input clearable v-model="addData.maintainer" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="设备状态">
              <!-- <el-input type="number" min="0" clearable v-model="addData.carNum" placeholder="请输入" /> -->
              <el-radio-group v-model="addData.equipmentStatus">
                <el-radio label="正常">正常</el-radio>
                <el-radio label="异常">异常</el-radio>
                <!-- <el-radio :label="9">Option C</el-radio> -->
              </el-radio-group>
            </el-form-item>
            <el-form-item label="备注" style="margin-left: 30px">
              <el-input :rows="4" type="textarea" clearable v-model="addData.note" placeholder="请输入" />
            </el-form-item>
          </el-form>

          <div style="padding-left: 75px">
            <el-button type="primary" @click="add">提交</el-button>
            <el-button @click="back">返回</el-button>
          </div>
        </div>
        <!-- 编辑 -->
        <!-- <div class="add">
          <el-form require-asterisk-position="right">
            <el-form-item label="设备分类" required="true">
              <el-select clearable v-model="addData.equipmentClassify" placeholder="设备分类" style="width:350px">
                <el-option label="电梯" value="电梯" />
                <el-option label="健身器材" value="健身器材" />
                <el-option label="路灯" value="路灯" />
                <el-option label="垃圾桶" value="垃圾桶" />
                <el-option label="灭火器" value="灭火器" />
              </el-select>
            </el-form-item>

            <el-form-item label="设备名称" required="true">
              <el-input clearable v-model="addData.equipmentName" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="设备编号">
              <el-input clearable v-model="addData.equipmentNumber" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="设备型号">
              <el-input clearable v-model="addData.brandModel" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="位置区域">
              <el-input clearable v-model="addData.area" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="维护人员">
              <el-input clearable v-model="addData.maintainer" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="设备状态">
              <el-radio-group v-model="addData.equipmentStatus">
                <el-radio label="正常">正常</el-radio>
                <el-radio label="异常">异常</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="备注" style="margin-left: 30px">
              <el-input :rows="4" type="textarea" clearable v-model="addData.note" placeholder="请输入" />
            </el-form-item>
          </el-form>

          <div style="padding-left: 75px">
            <el-button type="primary" @click="edit">提交</el-button>
            <el-button @click="back">返回</el-button>
          </div>
        </div> -->
      </div>
    </div>
  </div>
</template>
  
<script setup lang="ts">
import { ref, onMounted } from "vue";
import http from "../../../utils/http";
import { ElMessage } from "element-plus";
import router from '../../../router/index'


let addData = ref({
  // id: 0,
  equipmentClassify:'',
  equipmentName: '',
  equipmentNumber:'',
  brandModel: '',
  area: '',
  maintainer: '',
  equipmentStatus: '',
  note:''
});

//提交
let add = () => {
  http({
    url: "/equipmentManagement/add",
    method: 'POST',
    data: addData.value
  }).then(({ data }) => {
    console.log(data)
    if (data.code == 0) {
      ElMessage({
        message: "新增成功",
        type: "success",
      });
      setTimeout(() => {
        router.push("/home/publicEquipment");
      }, 1500)
    } else {
      ElMessage.error("新增失败");
    }
  })
}
//编辑


//返回
let back = () => {
  router.push("/home/EquipmentClassificationManagement");
}

onMounted(() => {
  console.log("挂载后");
});
</script>
  
<style lang="less" scoped>
.NewArea {
  width: 70%;
  // height: 100%;
  margin: auto;

  .NewArea-tittle {
    margin-top: 20px;
    background-color: white;

    .crumbs {
      padding: 15px 20px;
      font-size: 16px;

      p {
        margin-bottom: 10px;

        span {
          color: #8d8d8d;
        }

        span:last-child {
          color: #000;
        }
      }
    }
  }

  .NewArea-content {
    padding: 15px 20px;
    margin-top: 20px;
    background-color: white;

    .content-title {
      width: 96%;
      padding-bottom: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .add {
      width: 500px;
      margin: auto;

      .el-form-item {
        margin-bottom: 30px;
        position: relative;

        .pos {
          position: absolute;
          top: 0;
          right: 50px;
        }
      }

      .el-input,
      .el-textarea {
        width: 350px;
      }
    }
  }
}
</style>
  